<template>
  <!-- 顾客账户管理 -->
  <div>
    <!-- 头部搜索框 -->
    <div class="header">
      <!-- 日期选择器 -->
      <el-date-picker
        v-model="choseDate"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        value-format="timestamp"
      />

      <!-- 下拉选择器--类型 -->
      <el-select
        v-model="customeType"
        clearable
        placeholder="请选择类型"
      >
        <el-option
          label="充值"
          value="充值"
        />
        <el-option
          label="消费"
          value="消费"
        />
      </el-select>

      <!-- 下拉选择器--状态 -->
      <el-select
        v-model="customeStatus"
        clearable
        placeholder="请选择状态"
      >
        <el-option
          label="正常"
          value="正常"
        />
        <el-option
          label="未审核"
          value="未审核"
        />
      </el-select>

      <!-- 下拉选择器--顾客编号 -->
      <el-input v-model="customeId" placeholder="请输入内容" style="width:200px;" />
      <!-- 查询按钮 -->
      <el-button
        type="primary"
        @click="queryCustome"
      >查询</el-button>
    </div>
    <!-- 表格信息 -->
    <div class="tableContent">
      <!-- :data 整个表格的数据源 -->
      <el-table
        :data="customeData"
        style="width: 100%"
      >
        <!-- 编号 -->
        <el-table-column
          prop="id"
          label="编号"
          align="center"
        />
        <!-- 交易金额 -->
        <el-table-column
          prop="transferMoney"
          label="交易金额"
          align="center"
        />
        <!-- 交易时间 -->
        <el-table-column
          prop="transferTime"
          :formatter="formatDate"
          label="交易时间"
          align="center"
        />
        <!-- 交易类型 -->
        <el-table-column
          prop="type"
          label="交易类型"
          align="center"
        />
        <!-- 状态 -->
        <el-table-column
          prop="status"
          label="状态"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.status==='正常'"
              type="success"
            >正常</el-tag>
            <el-tag
              v-else-if="scope.row.status==='未审核'"
              type="warning"
            >未审核</el-tag>
          </template>
        </el-table-column>
        <!-- 描述 -->
        <el-table-column
          prop="description"
          label="描述"
          align="center"
        />
      </el-table>
    </div>
    <!-- 底部导航栏 -->
    <div class="paginetion">
      <!-- 分页组件 -->
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
// 引入axios
import { get} from '@/utils/request'
// 引入moment
import moment from 'moment'
export default {
  data() {
    return {
      // 快速选择数组
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },

      // 日期选择器保存
      choseDate: '',

      // 类型保存
      customeType: '',

      // 状态保存
      customeStatus: '',

      // 顾客编号保存
      customeId: '',

      // 当前的页码
      currentPage: 1,

      // 每页要展示的数据条数
      pageSize: 8,

      // 页面展示数据的总条数
      total: 10,

      // 顾客表格数组--数据源
      customeData: [],

      // 定义一个查询的参数
      queryData: {}
    }
  },
  computed: {},
  created() {
    this.getAllCustomeData()
  },
  mounted() { },
  methods: {

    // 请求获得顾客账单列表
    async getAllCustomeData() {
      // 获取参数
      const data = {
        page: this.currentPage,
        pageSize: this.pageSize
      }

      // 通过对应的参数发送网络请求 获取顾客账单数组数据
      const res = await get('/account/pageQueryCustomerAccount', { ...data, ...this.queryData })

      // 将data中的产品数组 进行赋值
      this.customeData = res.data.list

      // 页面总数据条数 赋值
      this.total = res.data.total
    },

    // 查询按钮查询方法
    queryCustome() {
      // 判断日期是否选择
      if (this.choseDate) {
        // 定义参数
        var data = {
          // 开始时间
          beginTime: this.choseDate[0],

          // 结束时间
          endTime: this.choseDate[1],

          // 类型
          type: this.customeType,

          // 状态
          status: this.customeStatus,

          // 顾客编号
          userId: this.customeId
        }
      } else {
        // 定义参数
        var data = {
          // 类型
          type: this.customeType,

          // 状态
          status: this.customeStatus,

          // 顾客编号
          userId: this.customeId
        }
      }

      // 格式化参数 当某个属性没有值的时候 将其删除掉 以防影响网络请求的操作
      for (const key in data) {
        if (!data[key]) {
          delete data[key]
        }
      }
      // 将参数 赋值给 queryData
      this.queryData = data
      // 将页数强制回到第一页
      this.currentPage = 1
      // 重新加载产品数据
      this.getAllCustomeData()
    },

    // 页面展示数据条数切换
    handleSizeChange(val) {
      // 将每页要展示的数据的条数 进行一个更新
      this.pageSize = val
      // 将当前的页数 重置到第一页
      this.currentPage = 1
      // 重新调用获取所有产品数据的方法
      this.getAllCustomeData()
    },

    // 当前页切换
    handleCurrentChange(val) {
      // 将当前页数 与 分页插件动态点击控制的页数相绑定
      this.currentPage = val
      // 重新调用获取所有产品数据的方法
      this.getAllCustomeData()
    },

    // 时间格式化方法
    formatDate: function(row, column) {
      var date = row[column.property]
      if (date == undefined) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
      // return moment(date).format("YYYY-MM-DD");
    }
  }
}
</script>
<style scoped>
/* 设置header的样式 */
.header {
  line-height: 40px;
}
/* 分页区域的样式 */
.paginetion {
  position: fixed;
  bottom: 40px;
  right: 10px;
}
</style>
